<!DOCTYPE html>
<html>
<head>
    <title>{$platform.name}</title>
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>

    <!--弹框js-->
    <script src="/static/js/yii.js"></script>

    {if condition="$swidthStyle eq 0"}
    <link href="/static/css/pattern/public.css" rel="stylesheet"/>
    {else/}
    <link href="/static/css/default/public.css" rel="stylesheet"/>
    {/if}
</head>
<body>
<style>
    html, body{background-color:#FFF!important;}
    .modal-body{background-color:#fff;padding:15px}
    .page-header{margin-top:15px!important;}
    .form-horizontal{display: inline-block;width:100%;padding-bottom: 70px;}
    .add_button{border-top:1px solid #eee;padding-top:15px;}
    .config_img {
        height:65px;
        margin-top: 15px;
    }
    .role_list>div{border-top:1px solid #e5e5e5;width:100%;border-bottom: 1px solid #e5e5e5;}
    .role_list:nth-child(n+3){margin-top:15px;}
    .columnList{padding-left:35px;}
</style>

<div class="modal-body">

    <fieldset class=" layui-field-title" >
        <legend>添加角色</legend>
    </fieldset>



    <form class="layui-form layui-form-pane form-horizontal" action="" >
        <div class="layui-form-item layui-col-md9">
            <label class="layui-form-label">*角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="角色名称" class="layui-input" value="{$role.name}">
                <input type="hidden" name="id" placeholder="id" class="layui-input" value="{$role.id}">
            </div>
        </div>

        <div class="layui-form-item layui-col-md9 ">
            <label class="layui-form-label">*权限列表</label>
            {volist name="privilege" id="vo"}
            <div class="layui-input-block role_list">
                <input class="parent" type="checkbox" name="privilege_list[]" lay-skin="primary" title="{$vo.name}" value="{$vo.id}" {if condition="$vo.selected eq 1"} checked {/if} >
                <div class="layui-form-item columnList">
                    {volist name="$vo.click" id="v"}
                    <input type="checkbox" name="privilege_list[]" lay-skin="primary" title="{$v.name}" value="{$v.id}" {if condition="$v.selected eq 1"} checked {/if}>

                        <div class="layui-form-item columnList">
                            {volist name="$v.click" id="v1"}
                            <input type="checkbox" name="privilege_list[]" lay-skin="primary" title="{$v1.name}" value="{$v1.id}" {if condition="$v1.selected eq 1"} checked {/if}>
                            {if condition="count($v1['click']) !=0"}
                            <div class="layui-form-item columnList">
                                {volist name="$v1.click" id="v2"}
                                <input type="checkbox" name="privilege_list[]" lay-skin="primary" title="{$v2.name}" value="{$v2.id}" {if condition="$v2.selected eq 1"} checked {/if}>
                                {/volist}
                            </div>
                            {/if}
                            {/volist}
                        </div>

                    {/volist}
                </div>
            </div>
            {/volist}
        </div>

    </form>

</div>
<div class="add_button">
    <div class="layui-form-item">
        <div class="layui-col-md-offset1">
            <a type="button" class="layui-btn layui-btn-primary" href="{:URL('index/role/index')}" >取消</a>
            <button type="button" class="layui-btn" id="newsave" >保存</button>
        </div>
    </div>
</div>


<script>
    $("#newsave").click(function () {
        layui.form.render();
        var data = $("form").serializeArray();
        $.ajax({
            type:'post',
            url:"{:URL('index/role/save')}",
            data:data,
            dataType:'JSON',
            success:function (res) {
                if(res.status!='success'){
                    layer.alert(res.msg);
                }else{
                    window.location.href = "{:URL('index/role/index')}";
                }
            },
            error:function (res) {
            }
        });
    });

    layui.use(['table','form','jquery'], function() {
        var form = layui.form,
            table = layui.table,
            $=layui.jquery;

        form.on('checkbox()', function(data){

            var pc =  data.elem.classList //获取选中的checkbox的class属性

            if(data.elem.checked==true){
                if(pc=="parent"){
                    var c =$(data.elem).siblings().children("input[type='checkbox']");
                    c.each(function(){
                        var e = $(this);
                        e.next().addClass("layui-form-checked");
                        e.attr("checked",true);
                    });
                }else{
                    $(data.elem).parent().prev().addClass("layui-form-checked");
                    $(data.elem).parent().parent().find(".parent").prop("checked",true)
                }

            }else{

                if(pc=="parent"){
                    var c =$(data.elem).siblings().children("input[type='checkbox']");
                    c.each(function(){
                        var e = $(this);
                        e.next().removeClass("layui-form-checked")
                        e.attr("checked",false);
                    });
                }else{

                    var c = $(data.elem).siblings("div");
                    var count =0;
                    c.each(function(){
                        var is =  $(this).get(0).classList;
                        if(is.length==3){
                            count++;
                        }
                    });
                    if(count>0){

                    }else{
                        $(data.elem).parent().prev().removeClass("layui-form-checked");
                        $(data.elem).parent().parent().find(".parent").prop("checked",false)
                    }
                }
            }

        });

    });

</script>

</body>
</html>